<template>
  <el-dialog title="新增 部门" :visible.sync="formPage.show">
    <el-form :model="formPage.formData" :inline="true" label-position="left" class="gds_form" :rules="rules" ref="deptAddForm">
      <el-input v-model="formPage.formData.id" auto-complete="off" type="hidden"></el-input>

      <el-form-item label=" 部门简称" :label-width="formLabelWidth" prop="simpleName">
        <el-input v-model="formPage.formData.simpleName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门全称" :label-width="formLabelWidth" prop="fullName">
        <el-input v-model="formPage.formData.fullName" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="所属部门" :label-width="formLabelWidth" prop="pid" >
        <el-cascader
          :options="formPage.cascader_data"
          :show-all-levels="false" :props="props"
          v-model="formPage.formData.pids"
          @change="addPid"
          change-on-select
        ></el-cascader>
        <!--<el-input v-model="form.pid" auto-complete="off"></el-input>-->
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth" >
        <el-input-number size="medium" v-model="formPage.formData.seq"></el-input-number>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
        <el-select v-model="formPage.formData.status" placeholder="请选择活动区域">
          <el-option label="启用" value="1"/>
          <el-option label="禁用" value="0"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="formPage.show = false">取 消</el-button>
      <el-button type="primary" @click="editResource">确 定</el-button>
      <el-button @click="resetForm('resourceAddForm')">重置</el-button>
    </div>
  </el-dialog>


</template>

<script>
  import { Message } from 'element-ui'
  import {saveDept} from "@/api/dept/dept";

  export default {
    name: "deptAdd",
    props: ['formPage'],
    data() {
      return {
        formLabelWidth: '100px',
        props: {
          value: 'id',
          label:'simpleName',
          children: 'children'
        },
        addModel:{
          id: "",
          seq: "",
          status: "",
          version: "",
          simpleName:"",
          fullName:"",
          tips:"",
          pid: "",
        },
        rules: {
          simpleName: [{ required: true, message: ' 部门简称不能为空', trigger: 'change' }],
          pid:[{ required: true, message: ' 上级部门不能为空', trigger: 'change' }],
          fullName: [{ required: true, message: ' 部门全称不能为空', trigger: 'change' }],
          componentName: [{ required: true, message: '组件名称不能为空', trigger: 'change' }],
          componentPath: [{ required: true, message: '组件路径不能为空', trigger: 'change' }],
          resourceType:[{ required: true, message: '类型必须选择', trigger: 'change' }],
          status:[{ required: true, message: '状态必须选择', trigger: 'change' }]
        },
      };
    },
    methods:{
       addPid(aaa){
         console.log(this.formPage.formData.pids)
         if(aaa.length==1){
           this.formPage.formData.pid=aaa[0]
         }
         else {
           this.formPage.formData.pid=aaa[aaa.length-1]
         }
       },
      editResource(){
         console.log(this.formPage.formData)
         // return
        this.$refs['deptAddForm'].validate((valid) => {
          if (valid) {
            for(var p in  this.addModel){//遍历json对象的每个key/value对,p为key
              this.addModel[p]=this.formPage.formData[p]
            }
            saveDept(this.addModel).then(response => {
              if(response){
                Message({
                  message: response.data.mesg,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.formPage.show = false;
                this.$parent.onSearch();
              }
            }).catch(error => {
              console.log(error)
            });
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){

      // console.log(this.formPage.formData)

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">


</style>


